<template>
    <div class="Voice" v-if="AllData !== null">
        <!-- 轮播图 -->
        <div class="Banner">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in BannerData" :key="index">
                    <img :src="item.cover" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 本周热听 -->
        <div class="tips">
            <div class="title">{{ AllData[1].name }}</div>
            <div class="tips-item" v-for="(item, index) in HotData" @click="goBookDetails(item.id, item.title)">
                <div class="img-box">
                    <img class="img-auto" :src="item.cover" />
                </div>
                <div class="RigMsg">
                    <div class="name">{{ item.title }}</div>
                    <div class="author-type">{{ item.author }} / {{ item.category }}</div>
                    <div class="desc">{{ item.content }}</div>
                </div>
            </div>
        </div>
        <!-- 广告图 -->
        <div class="AD">
            <img class="img-auto" :src="item.cover" v-for="(item, index) in ADData" :key="index" />
        </div>
        <!-- 女生精选 -->
        <div class="GirlsPick">
            <div class="title">{{ AllData[3].name }}</div>
            <div class="GirlsPick-item-box">
                <div class="GirlsPick-item" v-for="(item, index) in GirlsPickData" :key="index" @click="goBookDetails(item.id, item.title)">
                    <div class="img-box">
                        <img class="img-auto" :src="item.cover" />
                        <div class="name">{{ item.title }}</div>
                        <div class="author">{{ item.author }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="foot">我是有底线的(*^▽^*)</div>
    </div>
</template>

<script>
import { getVoice } from "../api/VoiceData";
export default {
    name: "Publish",
    data() {
        return {
            AllData: null,
            BannerData: null,
            // 本周热听
            HotData: null,
            // 广告图
            ADData: null,
            // 女生精选
            GirlsPickData: null,
        };
    },
    created() {
        this.getVoice();
        // getVoice().then(data=>{
        //     this.AllData = data.data.list
        //     (this.AllData);
        //     // 轮播图
        //     this.BannerData = this.AllData[0].banners
        //     // 本周热听
        //     this.HotData = this.AllData[1].list
        //     // 广告图
        //     this.ADData = [this.AllData[2]]
        //     // 女生精选
        //     this.GirlsPickData = this.AllData[3].list
        // })
    },
    methods: {
        getVoice() {
            this.axios({
                method: "get",
                url: "store/show.json",
                params: {
                    type: "audio",
                    uuid: "b67282bb443845fabe5b543795a27618",
                },
            })
                .then((res) => {
                    res;
                    this.AllData = res.data.data.list;
                    // 轮播图
                    this.BannerData = this.AllData[0].banners;
                    // 本周热听
                    this.HotData = this.AllData[1].list;
                    // 广告图
                    this.ADData = [this.AllData[2]];
                    // 女生精选
                    this.GirlsPickData = this.AllData[3].list;
                })
                .catch((err) => {
                    "请求出错了=>", err;
                });
        },
        // 跳转听书详情
        goBookDetails(BookId, title) {
            this.$router.push({
                name: "ListenBook",
                query: {
                    BookId,
                    title,
                },
            });
        },
    },
};
</script>

<style lang="less" scoped>
.Voice {
    height: 522px;
    overflow-y: auto;
    background-color: #f7f8f8;
    // 去掉滚动条
    &::-webkit-scrollbar {
        display: none;
    }
    .AD {
        width: 350px;
        height: 104px;
        margin: 10px auto;
    }
    .foot {
        width: 100%;
        height: 40px;
        background-color: #ecefef;
        text-align: center;
        line-height: 40px;
    }

    .GirlsPick {
        width: 350px;
        margin: 0 auto;
        border-bottom: 1px solid #e5eaea;
        padding-bottom: 40px;

        .title {
            width: 200px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            margin: 20px 0 5px 5px;
        }
        .GirlsPick-item-box {
            width: 350px;
            margin: 0 auto;
            display: flex;
            margin-bottom: 80px;
            .GirlsPick-item {
                width: 25%;
                margin-right: 17px;
                .img-box {
                    width: 100%;
                    height: 80px;
                }
                .name {
                    width: 74px;
                    font-size: 14px;
                    margin: 5px 0;
                    // 给容器元素类型转换为
                    display: -webkit-box;
                    // 设置弹性盒子垂直排列
                    -webkit-box-orient: vertical;
                    // 控制要显示的行数
                    -webkit-line-clamp: 2;
                    // 溢出隐藏
                    overflow: hidden;
                }
                .author {
                    color: #686969;
                    width: 74px;
                    // 不要自动换行
                    white-space: nowrap;
                    overflow: hidden;
                    // 溢出显示省略号
                    text-overflow: ellipsis;

                    // 显示一行
                    -webkit-line-clamp: 1;
                }
            }
        }
    }
}

.Banner {
    width: 350px;
    // background-color: pink;
    margin: 10px auto;
    .van-swipe-item {
        text-align: center;
        img {
            width: 96%;
            display: inline-block;
        }
    }
    ::v-deep {
        .van-swipe__indicators {
            position: fixed;
            bottom: 8px;
            left: 8%;
        }
    }
}

.tips {
    width: 350px;
    margin: 0 auto;
    border-bottom: 1px solid #e5eaea;
    padding-bottom: 5px;
    margin-left: 20px;
    .title {
        width: 200px;
        height: 30px;
        font-size: 18px;
        font-weight: 700;
        line-height: 30px;
        margin: 20px 0 -5px 0;
    }
    .tips-item {
        width: 100%;
        margin: 15px auto;
        display: flex;
        .img-box {
            width: 20%;
            height: 100px;
        }
        .RigMsg {
            width: calc(80% - 15px);
            margin-left: 10px;
            .name {
                font-size: 16px;
                font-weight: 700;
                margin-bottom: 5px;
            }
            .author-type {
                color: #686969;
                margin-bottom: 15px;
            }
            .desc {
                // 给容器元素类型转换为
                display: -webkit-box;
                // 设置弹性盒子垂直排列
                -webkit-box-orient: vertical;
                // 控制要显示的行数
                -webkit-line-clamp: 2;
                // 溢出隐藏
                overflow: hidden;
                color: #686969;
            }
        }
    }
}
</style>
